<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,initial-scale=1,viewport-fit=cover"
    />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>思维果</title>
    <script>
      (function(win, lib) {
        var doc = win.document;
        var docEl = doc.documentElement;
        var metaEl = doc.querySelector('meta[name="viewport"]');
        var flexibleEl = doc.querySelector('meta[name="flexible"]');
        var os = "";
        var isDarkMode = getCookie("darkMode") === "true" ? 1 : 0;
        var dpr = 0;
        var scale = 0;
        var tid;
        var flexible = lib.flexible || (lib.flexible = {});

        if (metaEl) {
          // console.warn('将根据已有的meta标签来设置缩放比例');
          var match = metaEl
            .getAttribute("content")
            .match(/initial\-scale=([\d\.]+)/);
          if (match) {
            scale = parseFloat(match[1]);
            dpr = parseInt(1 / scale);
          }
        } else if (flexibleEl) {
          var content = flexibleEl.getAttribute("content");
          if (content) {
            var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
            var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
            if (initialDpr) {
              dpr = parseFloat(initialDpr[1]);
              scale = parseFloat((1 / dpr).toFixed(2));
            }
            if (maximumDpr) {
              dpr = parseFloat(maximumDpr[1]);
              scale = parseFloat((1 / dpr).toFixed(2));
            }
          }
        }

        if (!dpr && !scale) {
          var isAndroid = win.navigator.appVersion.match(/android/gi);
          var isIPhone = win.navigator.appVersion.match(/iphone/gi);
          var devicePixelRatio = win.devicePixelRatio;
          if (isIPhone) {
            // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
            if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
              dpr = 3;
            } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
              dpr = 2;
            } else {
              dpr = 1;
            }
            os = "ios";
          } else {
            // 其他设备下，仍旧使用1倍的方案
            dpr = 1;
            os = "android";
          }
          scale = 1 / dpr;
        }

        docEl.setAttribute("data-dpr", dpr);
        docEl.setAttribute("data-os", os);
        docEl.setAttribute("data-dark", isDarkMode);
        if (!metaEl) {
          metaEl = doc.createElement("meta");
          metaEl.setAttribute("name", "viewport");
          metaEl.setAttribute(
            "content",
            "initial-scale=" +
              scale +
              ", maximum-scale=" +
              scale +
              ", minimum-scale=" +
              scale +
              ", user-scalable=no"
          );
          if (docEl.firstElementChild) {
            docEl.firstElementChild.appendChild(metaEl);
          } else {
            var wrap = doc.createElement("div");
            wrap.appendChild(metaEl);
            doc.write(wrap.innerHTML);
          }
        }

        function refreshRem() {
          htmlFontSize();
        }

        function getCookie(c_name) {
          var c_start = 0,
            c_end = 0;
          if (document.cookie.length > 0) {
            c_start = document.cookie.indexOf(c_name + "=");
            if (c_start != -1) {
              c_start = c_start + c_name.length + 1;
              c_end = document.cookie.indexOf(";", c_start);
              if (c_end == -1) c_end = document.cookie.length;
              return document.cookie.substring(c_start, c_end);
            }
          }
          return "";
        }

        win.addEventListener(
          "orientationchange",
          function() {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
          },
          false
        );
        win.addEventListener(
          "pageshow",
          function(e) {
            if (e.persisted) {
              clearTimeout(tid);
              tid = setTimeout(refreshRem, 300);
            }
          },
          false
        );

        // if (doc.readyState === "complete") {
        //   doc.body.style.fontSize = 12 * dpr + "px";
        // } else {
        //   doc.addEventListener(
        //     "DOMContentLoaded",
        //     function(e) {
        //       doc.body.style.fontSize = 12 * dpr + "px";
        //     },
        //     false
        //   );
        // }

        refreshRem();

        flexible.dpr = win.dpr = dpr;
        flexible.refreshRem = refreshRem;
        flexible.rem2px = function(d) {
          var val = parseFloat(d) * this.rem;
          if (typeof d === "string" && d.match(/rem$/)) {
            val += "px";
          }
          return val;
        };
        flexible.px2rem = function(d) {
          var val = parseFloat(d) / this.rem;
          if (typeof d === "string" && d.match(/px$/)) {
            val += "rem";
          }
          return val;
        };
        var elem = document.createElement("canvas");
        if (elem.getContext && elem.getContext("2d")) {
          document.documentElement.setAttribute(
            "data-webp",
            elem.toDataURL("image/webp").indexOf("data:image/webp") === 0
              ? 1
              : 0
          );
          window.webp =
            elem.toDataURL("image/webp").indexOf("data:image/webp") === 0;
        } else {
          document.documentElement.setAttribute("data-webp", "0");
          window.webp = false;
        }
        /*
         * 防止手机设置非标准字体
         * */
        function htmlFontSize() {
          var h = Math.max(
            document.documentElement.clientHeight,
            window.innerHeight || 0
          );
          var w = Math.max(
            document.documentElement.clientWidth,
            window.innerWidth || 0
          );

          const isMarket = /mimarket/i.test(navigator.userAgent.toLowerCase());
          function scaleAll() {
            var width = w;
            var fz = ~~((width * 14) / 36) / 10;
            var html = document.getElementsByTagName("html")[0];
            html.style.cssText = "font-size: " + fz + "px";
            var realfz =
              ~~(
                +window.getComputedStyle(html).fontSize.replace("px", "") *
                10000
              ) / 25715;
            if (fz !== realfz) {
              html.style.cssText = "font-size: " + fz * (fz / realfz) + "px";
            }
          }
          if (isMarket) {
            window.onload = function() {
              var $dom = document.createElement("div");
              $dom.style = "font-size:10px;width:10rem;";
              document.body.appendChild($dom);
              // 计算出放大后的字体
              var scaledFontSize = parseInt(
                window
                  .getComputedStyle($dom, null)
                  .getPropertyValue("font-size")
              );
              var scaledwidthSize = parseInt(
                window.getComputedStyle($dom, null).getPropertyValue("width")
              );
              var s = scaledwidthSize / w;
              s = s.toFixed(2);
              s = Math.round(s * 10) / 10;
              document.body.removeChild($dom);
              // 计算原字体和放大后字体的比例
              var scaleFactor = scaledFontSize / 10;
              if (s == scaleFactor) {
                scaleAll();
                return;
              }
              document.documentElement.setAttribute(
                "systemFontSizeScale",
                scaleFactor
              );
              document.documentElement.setAttribute("market", 1);
            };
            return;
          }
          scaleAll();
        }
        document.documentElement.style.fontSize = "10vw";
        htmlFontSize();
      })(window, window["lib"] || (window["lib"] = {}));
    </script>
  </head>

  <body>
    <%= require('html-loader!@/component/m/header.html') %>
    <main class="main-view">
      <div class="main_section-container">
        <div class="main_home-banner"></div>
        <div class="home_01-content">
          <p class="home_01-info">
            <span class="home_01-htxt">698元</span>
            <span class="home_01-btxt">9.9元</span>
            <span class="home_01_ctxt">/2节 编程试听课</span>
          </p>
          <div class="home_01-form">
            <div class="home_01-ipt phone-ipx">
              <span class="home_ipt-ico"></span>
              <input type="text" placeholder="请输入您的手机号">
            </div>
            <div class="home_01-ipt">
              <input type="text" placeholder="短信验证码">
            </div>
            <div class="home_01-box">
              <span class="home_box-ico"></span>
              <p class="home-01-tip">我已阅读并同意《思维果用户注册协议》</p>
            </div>
            <div class="home-01-btn">立即领取</div>
          </div>

        </div>
      </div>
      <div class="main_section-container">
        <div class="common_project-head">
          <div class="common_head-ico head_02-icon"></div>
          <p class="common_head-title"><span>青少年为什么要学编程</span></p>
          <p class="common_head-desc">编程语言通向未来世界的第二语言</p>
        </div>
        <div class="home_02-content">
          <div class="home_02-list">
            <div class="home_02-item">
              <div class="home_02-ico h-ico1"></div>
              <div class="home_02-info">
                <p class="home_02-title">提升逻辑思维</p>
                <p class="home_02-desc">尝试独立的分析问题、解决问题，通过现象探究事物的本质，由具象转变为抽象的概念，再归纳为编程执行模块。在这个过程中逐渐提升逻辑思维能力</p>
              </div>
            </div>
            <div class="home_02-item">
              <div class="home_02-ico h-ico2"></div>
              <div class="home_02-info">
                <p class="home_02-title">巩固科学知识</p>
                <p class="home_02-desc">将学科知识融入场景化的项目进行教学，通过对项目的观察、调试，充分理解学科知识的概念</p>
              </div>
            </div>
            <div class="home_02-item">
              <div class="home_02-ico h-ico3"></div>
              <div class="home_02-info">
                <p class="home_02-title">升学录取加分</p>
                <p class="home_02-desc">北京市教委印发的《关于进一步推进高中阶段学校考试招生制度改革的实施意见》，主张将科创类综合素质评价纳入高校招生</p>
              </div>
            </div>
            <div class="home_02-item">
              <div class="home_02-ico h-ico4"></div>
              <div class="home_02-info">
                <p class="home_02-title">国家战略</p>
                <p class="home_02-desc">人工智能上升为国家发展战略。明确提出：在2030年，人工智能理论、技术与应用总体达到世界领先水平，成为世界主要人工智能创新中心。</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </body>
</html>
